<template>
	<view class="u-flex-1">
		<view class="unlogin u-flex-col u-row-center" v-if="login==0">
			<u-empty text="还没有登陆" mode="car">
				<u-button @click="goPage('/pages/login/login','login')" slot='bottom' type="primary" shape="circle">立即登录
				</u-button>
			</u-empty>
		</view>
		<scroll-view scroll-y="true" class="u-flex-1" style="height: 100%" v-else>
			<view class="unlogin u-p-20">
				<u-empty style='height: 50vh;' text="购物车还是空的" mode="car" v-if='carList.length==0'>
					<u-button @click="$emit('goHome')" slot='bottom' shape="circle">去逛逛
					</u-button>
				</u-empty>
				<view class="u-flex" v-for="(item,index) in carList" :key="index">
					<u-checkbox @change="checkboxChange" :name='index' shape="circle" v-model="item.checked">
					</u-checkbox>
					<view class="u-flex u-flex-1" @click="$u.route('/pages/shop/detail/detail',{id:item.goods.id})">
						<u-image width="160rpx" height="160rpx" :show-loading='false' :src="item.src"></u-image>
						<view class="u-m-l-60 u-flex-1">
							<view class="">
								{{item.title}}
							</view>
							<view class="u-font-22 u-m-t-10 u-m-b-10">
								{{item.goods.remarks}}
							</view>
							<view class="u-flex u-row-between">
								<text style="color: red;">￥{{item.price | getPrice}}</text>
								<u-number-box v-if="edit=='编辑'" :min="1" :max='item.sku?item.sku.stock:item.goods.stock' v-model="item.count"
									@change="valChange($event,item.id)"></u-number-box>
							</view>
						</view>
					</view>
				</view>
				<view class="u-flex u-row-between" v-if="carBzList.length">
					<view class="u-p-t-20 u-p-b-20 u-font-32 u-tips-color">
						库存不足
					</view>
				</view>
				<view class="u-flex" v-for="(item,index) in carBzList" :key="index">
					<u-checkbox disabled @change="checkboxChange" :name='index' shape="circle" v-model="item.checked">
					</u-checkbox>
					<view class="u-flex u-flex-1" @click="$u.route('/pages/shop/detail/detail',{id:item.goods.id})">
						<u-image width="160rpx" height="160rpx" :show-loading='false' :src="item.src"></u-image>
						<view class="u-m-l-60 u-flex-1">
							<view class="u-flex u-row-between">
								<text>{{item.title}}</text>
								<view class="u-type-error-dark u-m-l-10" style="flex-shrink: 0;" @click="bzClick(item.id,item.goods.id)">
									重新选择
								</view>
							</view>
							<view class="u-font-22 u-m-t-10 u-m-b-10">
								{{item.goods.remarks}}
							</view>
							<view class="u-flex u-row-between">
								<text style="color: red;">￥{{item.price | getPrice}}</text>
								<u-number-box disabled v-if="edit=='编辑'" :min="1" v-model="item.count"
									@change="valChange($event,item.id)"></u-number-box>
							</view>
						</view>
					</view>
				</view>
				<view class="u-flex u-row-between" v-if="carSqList.length">
					<view class="u-p-t-20 u-p-b-20 u-font-32 u-tips-color">
						已售罄
					</view>
					<view class="u-p-t-20 u-p-b-20 u-font-32 u-type-error-dark" @click="sqDel">
						清理已售罄商品
					</view>
				</view>
				<view class="u-flex" v-for="(item,index) in carSqList" :key="index">
					<u-checkbox disabled @change="checkboxChange" :name='index' shape="circle" v-model="item.checked">
					</u-checkbox>
					<view class="u-flex u-flex-1" @click="$u.route('/pages/shop/detail/detail',{id:item.goods.id})">
						<u-image width="160rpx" height="160rpx" :show-loading='false' :src="item.src"></u-image>
						<view class="u-m-l-60 u-flex-1">
							<view class="">
								{{item.title}}
							</view>
							<view class="u-font-22 u-m-t-10 u-m-b-10">
								{{item.goods.remarks}}
							</view>
							<view class="u-flex u-row-between">
								<text style="color: red;">￥{{item.price | getPrice}}</text>
								<u-number-box disabled v-if="edit=='编辑'" :min="1" v-model="item.count"
									@change="valChange($event,item.id)"></u-number-box>
							</view>
						</view>
					</view>
				</view>
				<view class="u-flex u-row-between" v-if="carSxList.length">
					<view class="u-p-t-20 u-p-b-20 u-font-32 u-tips-color">
						失效商品
					</view>
					<view class="u-p-t-20 u-p-b-20 u-font-32 u-type-error-dark" @click="sxDel">
						清理已失效商品
					</view>
				</view>
				<view class="u-flex" v-for="(item,index) in carSxList" :key="index">
					<u-checkbox disabled @change="checkboxChange" :name='index' shape="circle" v-model="item.checked">
					</u-checkbox>
					<view class="u-flex u-flex-1" @click="$u.route('/pages/shop/detail/detail',{id:item.goods.id})">
						<u-image width="160rpx" height="160rpx" :show-loading='false' :src="item.src"></u-image>
						<view class="u-m-l-60 u-flex-1">
							<view class="">
								{{item.title}}
							</view>
							<view class="u-font-22 u-m-t-10 u-m-b-10">
								{{item.goods.remarks}}
							</view>
							<view class="u-flex u-row-between">
								<text style="color: red;">￥{{item.price | getPrice}}</text>
								<u-number-box disabled v-if="edit=='编辑'" :min="1" v-model="item.count"
									@change="valChange($event,item.id)"></u-number-box>
							</view>
						</view>
					</view>
				</view>
				<view class="u-border u-m-t-30 u-p-t-20 u-p-b-20 u-p-l-10 u-p-r-10 u-flex u-row-between" v-if='carList.length'>
					<view class="u-flex u-flex-1">
						<u-checkbox @change="allChange" shape="circle" v-model="allChecked">全选</u-checkbox>
						<text style="color: red;" v-if="edit=='编辑'">合计：￥{{price | getPrice}}</text>
					</view>
					<template class="" v-if="edit=='编辑'">
						<u-button type="error" :disabled='disabled'
							@click="$u.route('/pages/shop/placeOrder/placeOrder')">结算({{count}})</u-button>
					</template>
					<template class="u-flex" v-else>
						<u-button type="warning" class='u-m-r-5' :disabled='disabled' @click='collect'>移入收藏</u-button>
						<u-button type="error" :disabled='disabled' @click='cartDelete'>删除</u-button>
					</template>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		cartQueryByUser,
		cartUpdate,
		cartDelete,
		userAdd
	} from '@/api/shop.js'
	import {
		$shopImgUrl
	} from '@/service/request.js'
	export default {
		name: "w-shop-car",
		computed: {
			...mapState(['login', 'userInfo', 'carList', 'carSqList', 'carSxList', 'carBzList'])
		},
		props: {
			edit: {
				type: String,
				default: ''
			},
		},
		watch: {
			carList: {
				handler(val, oldVal) {
					this.price = 0
					this.count = 0
					this.disabled = true
					this.allChecked = true
					const arr = []
					val.forEach(item => {
						if (item.checked) {
							this.disabled = false
							this.price += (item.price * item.count)
							this.count += item.count
							arr.push(item)
						} else {
							this.allChecked = false
						}
					})
					this.$store.commit('setPayList', arr)
				},
				deep: true
			}
		},
		data() {
			return {
				data: [],
				allChecked: true,
				disabled: false,
				price: 0,
				count: 0
			};
		},
		mounted() {
			this.$store.dispatch('cartQueryByUser')
			console.log(this.carList,1);
			console.log(this.carSqList,2);
			console.log(this.carSxList,3);
			console.log(this.carBzList,4);
		},
		methods: {
			collect() {
				const arr = []
				this.carList.forEach(item => {
					if (item.checked) {
						arr.push(item.idGoods)
					}
				})
				const token = uni.getStorageSync('sessionid')
				Promise.all(
					arr.map(item => {
						userAdd({
							idUser: this.userInfo.id,
							idGoods: item,
							JSESSIONID: token
						})
					})
				).then(res => {
					this.$u.toast('移入收藏成功')
					this.cartDelete()
				})
			},
			bzClick(id,gid){
				cartDelete({
					idArr: [id],
					JSESSIONID: uni.getStorageSync('sessionid')
				}).then(res => {
					this.$store.dispatch('cartQueryByUser')
					this.$u.route('/pages/shop/detail/detail',{id:gid})
				})
			},
			sqDel(){
				const arr = []
				this.carSqList.forEach(item => {
					arr.push(item.id)
				})
				cartDelete({
					idArr: arr,
					JSESSIONID: uni.getStorageSync('sessionid')
				}).then(res => {
					this.$store.dispatch('cartQueryByUser')
				})
			},
			sxDel(){
				const arr = []
				this.carSxList.forEach(item => {
					arr.push(item.id)
				})
				cartDelete({
					idArr: arr,
					JSESSIONID: uni.getStorageSync('sessionid')
				}).then(res => {
					this.$store.dispatch('cartQueryByUser')
				})
			},
			cartDelete() {
				const arr = []
				this.carList.forEach(item => {
					if (item.checked) {
						arr.push(item.id)
					}
				})
				cartDelete({
					idArr: arr,
					JSESSIONID: uni.getStorageSync('sessionid')
				}).then(res => {
					this.$store.dispatch('cartQueryByUser')
				})
			},
			valChange(e, id) {
				cartUpdate({
					id,
					count: e.value,
					JSESSIONID: uni.getStorageSync('sessionid')
				}).then(res => {
					// this.$store.dispatch('cartQueryByUser')
				})
			},
			goPage(path) {
				this.$u.route(path);
			},
			checkboxChange(e) {
				const arr = this.carList.slice(0)
				arr[e.name].checked = e.value
				this.$store.commit('setCarList', arr)
				let count = 0
				this.disabled = true
				arr.forEach(item => {
					if (item.checked) {
						count++
						this.disabled = false
					}
				})
				if (arr.length == count) {
					this.allChecked = true
				} else {
					this.allChecked = false
				}
			},
			allChange(e) {
				const arr = this.carList.slice(0)
				this.$store.commit('setCarList', arr.map(item => {
					return {
						...item,
						checked: e.value
					}
				}))
				this.disabled = !e.value
			},
		},
	}
</script>

<style lang="scss">
	.unlogin {
		height: 100%;
	}
</style>
